import React, { useState } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import { change_password } from '@/services/auth/api';
import e from 'express';
import { FormattedMessage, useIntl } from '@umijs/max';

interface ChangePasswordModalProps {
  visible: boolean;
  onCancel: () => void;
}

const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ visible, onCancel }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const intl = useIntl();

  const onSubmit=async (params:any)=>{
     const loginResponse = await change_password(params);
          const { code, data, msg} = loginResponse
          console.log("restpas:"+JSON.stringify(loginResponse));
          if (code == 0) {
            message.success(intl.formatMessage({id:'password.update.sucess', defaultMessage:'Password updated successfully'}));
            form.resetFields();
            onCancel()
          }else{
            message.error(msg);
          }
  }
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      if (values.newPassword !== values.confirmPassword) {
        message.error(intl.formatMessage({ id: 'password.update.new.check.password', defaultMessage:'The new password does not match the confirmed new password' }) );
        return;
      }
      setLoading(true);
      onSubmit({ oldPassword: values.oldPassword, newPassword: values.newPassword });
      
    } catch (error) {
      console.error(intl.formatMessage({id:'pages.check.failed', defaultMessage:'Check failed'}), error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={ intl.formatMessage({id: "password.update",defaultMessage:'Update Password' })}
      open={visible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
           <FormattedMessage id="component.button.cancel" defaultMessage="Cancel" />
        </Button>,
        <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
          <FormattedMessage id="component.button.submit.update" defaultMessage="Confirm Update" />
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        <Form.Item
          name="oldPassword"
          label={ intl.formatMessage({id: "password.update.old-password",defaultMessage:'Old Password' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'password.update.input.old-password' }) }]}
        >
          <Input.Password placeholder={intl.formatMessage({ id: 'password.update.input.old-password' })} />
        </Form.Item>
        <Form.Item
          name="newPassword"
          label={ intl.formatMessage({id: "password.update.new-password",defaultMessage:'New Password' })}
          rules={[{ required: true, message:intl.formatMessage({ id: 'password.update.input.new-password' }) }]}
        >
          <Input.Password placeholder={intl.formatMessage({ id: 'password.update.input.new-password' })} />
        </Form.Item>
        <Form.Item
          name="confirmPassword"
          label={ intl.formatMessage({id: "password.update.new-password",defaultMessage:'Confirm New Password' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'password.update.input.recheck.new-password' }) }]}
        >
          <Input.Password placeholder={intl.formatMessage({ id: 'password.update.input.recheck.new-password' })} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ChangePasswordModal;